<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Finalove-App</title>
	<link rel="stylesheet" href="../../resource/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../resource/css/mint.css">
	<link rel="stylesheet" href="../../resource/css/style.css">
	<script src="../../resource/js/vue.js"></script>
	<script src="../../resource/js/mint.min.js"></script>
</head>
<style type="text/css">
	.mt-tab-container-div{
		overflow: hidden;
	}
	.mint-cell-title{
		line-height: 70px;
	}
	.mint-cell-title img{
		margin-right:15px;
	}
	.mint-indexlist-nav{
		position: fixed;
		top: 40px;
		bottom: 55px;
	}
	.mint-button-text a{
		text-decoration: none;
		color: #FFF;
	}
	#friend-count {
		margin-bottom: 55px;
		line-height: 40px;
		text-align: center;
		font-size:18px;
		background-color: #fafafa;
	}
</style>
<body>
	<div id="main">
		<mt-header fixed title="通讯录">
			<mt-button slot="right" @click="addFriend"><i class="fa fa-plus"></i></mt-button>
		</mt-header>
		
		<div class="mt-tab-container-div">
			<mt-index-list>
				<mt-index-section v-for="group in friend_list" :index="group.initial">
					<mt-cell v-for="(item,index) in group.item" :title="item.name" :to="item.to">
						<img slot="icon" :src="item.head" width="50" height="50">
					</mt-cell>
				</mt-index-section>
				<div id="friend-count">
					共 {{friend_cout}} 位联系人
				</div>
			</mt-index-list>
		</div>

		<div class="mint-tabbar is-fixed">
			<a class="mint-tab-item" href="../chat/index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/msg.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">消息</div>
			</a>
			<a class="mint-tab-item  is-selected">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/user_list.png">
				</div>
				<div class="mint-tab-item-label">通信录</div>
			</a>
			<a class="mint-tab-item" href="../index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/home.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">首页</div>
			</a>
			<a class="mint-tab-item" href="../find/index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/find.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">发现</div>
			</a>
			<a class="mint-tab-item" href="../me/index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/user.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">我的</div>
			</a>
		</div>
	</div>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				friend_cout:32,
				friend_list:[{
					initial:"A",
					item:[{
						name:"Apple",
						to:"",
						head:"../../resource/img/0.jpg"
					},{
						name:"阿达西",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"哎哎哎",
						to:"",
						head:"../../resource/img/2.jpg"
					}]
				},{
					initial:"B",
					item:[{
						name:"BMW",
						to:"",
						head:"../../resource/img/0.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					},{
						name:"巴拉拉",
						to:"",
						head:"../../resource/img/1.jpg"
					}]
				},{
					initial:"W",
					item:[{
						name:"wangfang",
						to:"",
						head:"../../resource/img/0.jpg"
					},{
						name:"王某某",
						to:"",
						head:"../../resource/img/1.jpg"
					}]
				},{
					initial:"Z",
					item:[{
						name:"Zyc",
						to:"",
						head:"../../resource/img/0.jpg"
					},{
						name:"张默",
						to:"",
						head:"../../resource/img/1.jpg"
					}]
				}],
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					document.addEventListener('plusready',function () {
						// 在这里调用h5 plus api
						// 沉浸式导航栏
						plus.navigator.setFullscreen(true);
					},false);
				},
				addFriend() {
					this.$toast({message:"添加联系人",iconClass:'fa fa-plus'});
				}
			}
		})
	</script>
</body>
</html>
